<template>
	<div class="wind-collapse" :class="collapseClasses">
		<div class="wind-collapse__title" :class="{'is-expanded': show}" @click="onTitleClick">
			<slot name="title-slot">
				<div class="title-arrow">
					<Icon v-show="showArrow" class="title-arrow__icon" :class="{
						'is-expanded': show
					}" type="arrow-right"></Icon>
				</div>
				<div class="title-text">{{title}}</div>
			</slot>
		</div>
		<div
			v-show="show"
			ref="wrapper"
			:class="wrapperClasses"
			class="wind-collapse__wrapper"
			@transitionend="transitionend"
			@webkitTransitionEnd="transitionend"
		>
			<div ref="content" class="wind-collapse__content" :class="contentClasses">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script type="text/babel">
/**
 * Collapse by shang 2020/10/13
 * @desc Collapse 折叠组件
 * @params value[Boolean] 开启/关闭
 * @params title[String] 标题
 * @params disabled[Boolean] 禁用
 * @params showArrow[Boolean] 显示箭头 默认显示
 *
 * @slot defalut 内容插槽
 * @slot title-slot 标题插槽
 */
import Icon from '../icon'
export default {
	name: 'w-collapse',
	components: {
		Icon
	},
	props: {
		value: Boolean,
		title: String,
		disabled: Boolean,
		showArrow: {
			type: Boolean,
			default: true
		},
		contentHeight: String,
		fullScreen: Boolean
	},
	data () {
		return {
			show: false
		}
	},
	computed: {
		collapseClasses () {
			return {
				'is-fullScreen': this.fullScreen
			}
		},
		wrapperClasses () {
			return {
				'is-fullScreen': this.fullScreen,
				'is-flex': this.contentHeight
			}
		},
		contentClasses () {
			return {
				'is-flex': this.contentHeight
			}
		}
	},
	updated () {
		if (this.value) {
			this.resize()
		}
	},
	watch: {
		value: {
			immediate: true,
			handler (val) {
				if (val) {
					this.show = true
					this.resize()
				} else {
					this.close()
				}
			}
		}
	},
	methods: {
		onTitleClick () {
			if (this.disabled) {
				return false
			}
			this.$emit('input', !this.value)
		},
		transitionend () {
			if (!this.value) {
				this.show = false
			}
		},
		resize () {
			this.$nextTick(() => {
				const { wrapper, content } = this.$refs
				const height = this.contentHeight ? this.contentHeight : `${content.clientHeight}px`
				this.$fxUtils.fxRequestAnimationFrame(function () {
					wrapper.style.height = height
				})
			})
		},
		close () {
			this.$nextTick(() => {
				const { wrapper } = this.$refs
				this.$fxUtils.fxRequestAnimationFrame(function () {
					wrapper.style.height = 0
				})
			})
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '../../style/varsty.styl'
.wind-collapse {
	background-color: $wind-collapse-background-color
	margin-top:4px
	position: relative
	padding-top: 4px;
	&.is-fullScreen {
		flex: 1
		display: flex
		flex-direction: column
	}
	&__title {
		display: flex;
		flex-direction: row;
		height: 36px;
		align-items: center;
		font-size: 12px;
		font-weight: 700;
		position:relative
		cursor: pointer
		.title-text {
			flex: 1;
		}
		.title-arrow {
			width: 20px;
			&__icon {
				width: 10px
				height:10px
				transition: transform 0.3s;
				&.is-expanded {
					transform: rotate(270deg);
				}
			}
		}
		&.is-expanded::after {
			content: ' '
			position: absolute
			box-sizing:border-box
			right: 0
			bottom: 0
			left: 20px
			border-bottom:1px solid $wind-collapse-bord-color
			transform:scaleY(0.5)
		}
	}
	&__wrapper {
		overflow:hidden
		transition:height 0.3s ease-in-out
		will-change:height
		padding-left: 20px;
		padding-top: 10px;
		&.is-fullScreen {
			flex: 1
		}
		&.is-flex {
			display: flex
		}
	}
	&__content {
		&.is-flex {
			flex: 1
		}
	}
}
</style>
